<template>
    <div class="app">
        <header class="header">
            <div class="typeArea">
                <div class="logo"></div>
                <div class="title"><h1>书虫小说网后台管理系统</h1></div>
                <div class="option">
                    <ul class="login-and-register">
                        <li><router-link to="/login">注销</router-link></li>
                    </ul>
                </div>
            </div>
        </header>
        <section class="container">
            <aside>
                <el-row class="tac">
                    <el-col :span="24">
                        <el-menu default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                            <el-menu-item @click="to" index="2"><i class="el-icon-setting"></i>管理员管理</el-menu-item>
                            <el-submenu index="1">
                                <template slot="title"><i class="el-icon-menu"></i>小说管理</template>
                                <el-menu-item-group>
                                    <router-link to="/app/bookManager"><el-menu-item  index="1_1">全部小说</el-menu-item></router-link>
                                </el-menu-item-group>
                                <el-menu-item-group>
                                    <router-link to="/app/addBook"><el-menu-item index="1_2">添加小说</el-menu-item></router-link>
                                </el-menu-item-group>
                            </el-submenu>
                            <router-link to="/app/userManager"><el-menu-item index="3"><i class="el-icon-setting"></i>用户管理</el-menu-item></router-link>
                            <router-link to="/app/commentManager"><el-menu-item index="4"><i class="el-icon-message"></i>评论管理</el-menu-item></router-link>
                            <router-link to="/app/messageBoardManager"><el-menu-item index="5"><i class="el-icon-message"></i>留言板管理</el-menu-item></router-link>
                            <router-link to="/app/announcementManager"><el-menu-item index="6"><i class="el-icon-message"></i>公告管理</el-menu-item></router-link>
                        </el-menu>
                    </el-col>
                </el-row>
            </aside>
            <article>
                <router-view></router-view>
            </article>
        </section>
        <footer class="footer">© 2017-2027 Camie.com 版权所有</footer>
    </div>
</template>
<script>
    import {Message} from 'element-ui';
    export default{
        data:function(){
            return {

            }
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            to(){
                if(sessionStorage.getItem('adminPower') == 'super'){
                    this.$router.push({path:'/app/adminManager'});
                }else{
                    Message({
                        message:'您没有操作该模块的权限'
                    })
                }
            }
        },
        created:function () {
            if(!sessionStorage.getItem('adminPower')) {
                this.$router.push({path:'/login'});
            }
        }
    }
</script>
<style scoped>
    /*顶部*/
    .header{
        width: 100%;
        height: 80px;
        background-color: #324057;
        color: #ffffff;
    }
    .header>.typeArea{
        width: 1000px;
        height: 80px;
        margin:0 auto;
    }
    .header>.typeArea>.logo{
        background: url("../static/images/IMG_4406.png") no-repeat center center;
        -webkit-background-size:40px 40px;
        background-size:40px 56px ;
        height: 80px;
        width: 200px;
        float: left;
    }
    .header>.typeArea>.title{
        width: 600px;
        float: left;
    }
    .header>.typeArea>.title>h1{
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 30px;
    }
    .header>.typeArea>.option{
        width: 200px;
        float: right;
    }
    .header>.typeArea>.option>.login-and-register{
        width: 200px;
        height: 80px;
    }
    .header>.typeArea>.option>.login-and-register>li{
        float: right;
        height: 80px;
        width: 45px;
    }
    .header>.typeArea>.option>.login-and-register>li:hover a{
        color: #ffffff;
    }
    .header>.typeArea>.option>.login-and-register>li>a{
        display: inline-block;
        width: 45px;
        height: 80px;
        line-height: 92px;
        color: #9e9e9e;
        text-align: center;
        font-size: 16px;
        font-family: microsoft yahei;
    }
    /*中间内容*/
    /*侧边栏*/
    .container{
        width: 100%;
        height: 800px;
        display: flex;
        display: -webkit-flex;
    }
    .container>aside{
        width: 149px;
        height: 800px;
        background-color: #eef1f6;
    }
    /*内容*/
    .container>article{
        flex:1;
        margin: 14px;
        background-color: #eef1f6;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
    }
    /*底部*/
    .footer{
        width: 100%;
        background-color: #324057;
        height: 40px;
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        line-height: 40px;
    }
</style>